<template>
    <div class="container">
        <div class="buzu" v-if="coins=='不足'">
            <p>书币余额不足</p>
            <p>阅读本章需要 <span class="ben-zh">35</span> 书币，当前余额 <span class="yu-e">{{shubi}}</span> 书币</p>
        </div>
        <div v-else>
            <div class="title">充值</div>
            <div class="yu_e">您的余额: <span>{{shubi}}</span> 书币</div>
        </div>
        <hr>
        <div class="tit_money">选择充值金额<span> (1元=100书币)</span></div>
        <div class="content">
            <div class="money" :class="id==1 ? 'money_item':''" @click="amt(1)">
                <div class="">39元</div>
                <div class="money_2">3900书币</div>
                <div class="money_2">无赠送</div>
            </div>
            <div class="money" :class="id==2 ? 'money_item':''" @click="amt(2)">
                <div class="">59元</div>
                <div class="money_2">5900+3900书币</div>
                <div class="money_2">多送39元</div>
                <i class="iconfont icon-hot"></i>
            </div>
            <div class="money" :class="id==3 ? 'money_item':''" @click="amt(3)">
                <div class="">100元</div>
                <div class="money_2">10000+8000书币</div>
                <div class="money_2">多送80元</div>
            </div>
            <div class="money" :class="id==4 ? 'money_item':''" @click="amt(4)">
                <div class="">200元</div>
                <div class="money_2">20000+20000书币</div>
                <div class="money_2">多送200元</div>
            </div>
            <div class="money" :class="id==5 ? 'money_item':''" @click="amt(5)">
                <div class="money_3"><i class="iconfont icon-Czhuanshi"></i>年费VIP会员</div>
                <div class="money_3">(365元)</div>
                <div class="money_2">每天1元,全年免费看</div>
            </div>
        </div>
        <div class="chongzhi">
            <a :href="productUrl(id)">确认充值</a>
        </div>
        <div class="bottom">
            <p>温馨提示</p>
            <p>1.充值活动多充多送，最高赠送100%书币。</p>
            <p>2.1元=100书币</p>
            <p>3.<span>书币和会员皆属虚拟产品，用户一旦购买成功，不得以任何理由要求本公司退还全部或部分已充值款项，因不可抗力原因导致的情况除外。</span></p>
            <p>4.包年VIP用户看书无需消耗书币。</p>
            <p>5.使用微信支付方式前，请确认安装微信客户端。</p>
            <p>6.如遇网络问题，有可能会延迟到账，请耐心等待，1小时内未到账，请与客服联系。</p>
        </div>
        <bottom :i="icon"></bottom>
    </div>
</template>

<script>
    import bottom from './bottom'
    export default {
        name: "chongzhi",
        components:{
            bottom,
        },
        data(){
            let redirect = this.$route.query.successUrl?encodeURIComponent(this.$route.query.successUrl):encodeURIComponent(location.href);//转译链接
            return{
                id: 2,
                icon: 2,
                coins:this.$route.query.coins,
                successUrl:redirect,
                failedRedirect:redirect,
                shubi: 0,
            }
        },
        created:function(){
            this.set();
            this.$axios.get('/user-info').then(response=>{
                if(response){
                    this.shubi=response.data.user.TotalCoins
                }else{
                    this.shubi = 0
                }
            });
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            // target.scrollIntoView()
            document.title = '充值';
        },
        methods:{
            set:function(){
                this.$emit('set',2)
            },
            //返回上一页
            routerback: function () {
                if(this.coins == '不足'){
                    location.href = this.successUrl
                }else{
                    this.$router.push({path:'/index'});
                }
                // this.$router.back(-1)
            },
            //选择充值金额
            amt:function(e){
                this.id = e
            },
            productUrl(id) {
                let url = `/buy?ProductID=`+id+
                    `&SuccessRedirect=`+this.successUrl+
                    `&FailedRedirect=`+this.failedRedirect;
                return this.$axios.defaults.linkUrl(url);
            }
        }
    }
</script>

<style scoped>
    .container{
        background-color: #fbf9fe;
        color: #555;
        line-height: 1.5;
        font-weight: 300;
    }
    .title{
        width: 100%;
        text-align: center;
        color: #225fba;
        padding: 25px 0px 20px;
        line-height: 1;
        font-weight: 400;
        font-size: 24px;
    }
    hr{
        border: 0;
        border-top: 1px solid #eee;
        margin: 10px 0;
    }
    .yu_e{
        padding-left: 10px;
        font-size: 16px;
    }
    .yu_e span{
        color: darkorange;
    }
    .tit_money{
        padding-left: 10px;
    }
    .tit_money span{
        color: orangered;
    }
    .content{
        font-size: 18px;
        display: flex;
        flex-wrap: wrap;
        padding: 9px 5px;
        justify-content: space-between;
    }
    .money{
        width: 46.5%;
        position: relative;
        margin: 4px 1%;
        padding: 4px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-align: center;
        background-color: #fff;
    }
    .money div{
        margin-bottom: 2px;
    }
    .money_2{
        font-size: 13px;
    }
    .money_3{
        font-weight: 400;
    }
    .money_item{
        border-color: #ff8c00;
        color: #ff8c00;
    }
    .icon-hot{
        position: absolute;
        color: #ff4500;
        font-size: 26px !important;
        top: -13px;
        right: -7px;
    }
    .icon-Czhuanshi{
        color: goldenrod;
        font-size: 20px !important;
    }
    .chongzhi{
        background-color: #10AEFF;
        width: 94%;
        margin: 20px auto;
        text-align: center;
        color: white;
        border-radius: 5px;
        font-size: 18px;
    }
    .chongzhi a{
        display: block;
        color: #fff;
        width: 100%;
        padding: 7px 0px;
        text-decoration: none;
    }
    .bottom{
        margin:30px 15px 30px;
        color: #5e6a94;
        font-size: 0.9rem;
    }
    .bottom p span{
        color: #5e6a94;
    }
    .buzu{
        text-align: center;
        margin-bottom: 15px;
        padding-top: 25px;
        font-weight: 400;
    }
    .buzu p{
        margin: 5px;
    }
    .buzu p:nth-child(1){
        font-size: 1.2rem;
        color: #8b0000;
    }
    .buzu p:nth-child(2){
        font-size: 0.9rem;
        color: #999;
    }
    .buzu span{
        color: #ff8c00;
    }
</style>